<template >
          <div>
            <a-list
              :grid="{ gutter: 16, column: 1 }"
            >
              <a-radio-group
                v-decorator="['radio-group']"
                style="width: 100%; color: #fff"
                 v-for="(item, index) in this_facets" :key="index"
                  :name="'radioGroup' + index"
                :value="selectvalue"
              >
              
                <a-list-item>
                  <a-card
                    :title="item.label"
                    style="width: 90%; color: #fff"
                    :bodyStyle="headStyles"
                  >
                    <a-form-item>
                      <div v-if="isShowFacetList">
                        <a-row
                          v-for="(op, i) in item.facetList"
                          :key="i"
                          :style="customStyle"
                        >
                          <a-col :span="24">
                          
                            <a-radio
                              :value="op.id"
                              :data-id="op.id"
                              :name="item.id"
                              :checked="checked"
                              @change="
                                ChangeFilter(
                                  item.id,
                                  op.id,
                                  op.name,
                                  op.code,
                                  'true'
                                )
                              "
                              style="color: #fff"
                            >
                              &nbsp; &nbsp;
                              {{ op.name }}
                            </a-radio>
                          </a-col>
                          <!-- <a-col :span="4">
                        <a-badge
                            :count="op.count"
                            :number-style="{ backgroundColor: '#52c41a' }"
                        />
                        </a-col> -->
                        </a-row>
                      </div>
                    </a-form-item>
                  </a-card>
                </a-list-item>
              </a-radio-group>
            </a-list>
          </div>
</template>

<script>
// import this.$store from "../components/this.$store";

export default {
  props: {
    // state: Object,
    // f: Array,
  },
  data: () => ({
      // slider
    checked: true,
   selectvalue:[''],
      customStyle:
        'color:#2780e3',
    headStyles: {
      background: "#2780e3",
      color: "#fff",
    },
    headStyless: {
      disply: "none",
    },
  }),
  watch: {},
  computed: {
        //   slider
    this_facets() {
      var that = this;
      var facets = [];
      // if (this.$store.state[this.$store.state.Namedparent.name].books.rs.hasOwnProperty("facetsList")) {
      if (
        Object.prototype.hasOwnProperty.call(
          this.$store.state[this.$store.state.Namedparent.name].books.rs,
          "facetsList"
        )
      ) {
        var len1 = this.$store.state[this.$store.state.Namedparent.name].books
          .rs.facetsList.length;
        var label;
        var id;
        var value;
        var count;
        for (var i = 0; i < len1; i++) {
          var facet = [];
          var len2 = this.$store.state[this.$store.state.Namedparent.name].books
            .rs.facetsList[i].facetList.length;
          for (var j = 0; j < len2; j++) {
              label =
                that.$store.state[that.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetList[j].sub_name;
              id =
                that.$store.state[that.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetList[j].category_id;
              value =
                that.$store.state[that.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetList[j].sub_name;
              count = 0;
            

            facet[j] = {
              id: id,
              label: label,
              value: value,
              count: count,
              name: label,
              code: value,
            };
            // 检查过滤条件中是否已经被勾选
            var filters_len = this.$store.state[
              this.$store.state.Namedparent.name
            ].books.qs.filters;
            for (var fi = 0; fi < filters_len; fi++) {
              if (
                this.$store.state[this.$store.state.Namedparent.name].books.rs
                  .facetsList[i].facetsList[j].id ==
                this.$store.state[this.$store.state.Namedparent.name].books.qs
                  .filters[fi].id
              ) {
                if (
                  this.$store.state[
                    this.$store.state.Namedparent.name
                  ].books.qs.filters[fi].values.index(value)
                ) {
                  facet[j].checked = false;
                } else {
                  facet[j].checked = true;
                }
              }
            }
          }

          facets[i] = {
            facetList: facet,
            id: this.$store.state[this.$store.state.Namedparent.name].books.rs
              .facetsList[i].id,
            label: this.$store.state[this.$store.state.Namedparent.name].books
              .rs.facetsList[i].label,
          };
        }
           that.selectvalue = [];
        // this.$store.state[
        //   this.$store.state.Namedparent.name
        // ].books.qs.filters.forEach((item) => {
        //   console.log(item);
        //   that.selectvalue.push(item.values);

        // });
        that.selectvalue = this.$store.state[
          this.$store.state.Namedparent.name
        ].books.qs.categoryId;
 
        // for(var j = 0 ; j < this.$store.state[this.$store.state.Namedparent.name].books.qs.filters.length;j++){
        //     // for(var i=0;i<this.$store.state[this.$store.state.Namedparent.name].books.qs.filters[j].values;i++){
        //     //   that.selectvalue.push(this.$store.state[this.$store.state.Namedparent.name].books.qs.filters[j].values[i]);

        //     // }
        // }

        return facets;
        // } else {
        //   console.log(
        //     "this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList.length:  is null ",
        //     this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList,
        //     this.$store.state[this.$store.state.Namedparent.name].books.rs
        //   );
        // }
      } else {
        return {};
      }
    },
    // slider end
  },
  methods: {
        //   slider satrt
    isShowFacetList: function (facetList) {
      return facetList.length > 0;
    },
    ChangeFilterV2: function (e) {
      console.log("ChangeFilterV2: ", e);
    },
    ChangeFilter: function (fieldclassName, id, code, name, do_search_book) {
      this.$store.commit(
        this.$store.state.Namedparent.name + "/SHOW_DETAIL",
        false
      );
      this.$store.commit(
        this.$store.state.Namedparent.name + "/Changeloading",
        true
      );
      // this.$router.push({
      //   name:'QikanSearch'
      // });
      //   console.log("sss:", this.state);
           this.$store.commit(
            this.$store.state.Namedparent.name + "/searchtype",
            1
          )
            this.$router.push({
        path: "/QikanSearch"
      });
      return new Promise(() => {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/ChangeCurrentPageWithOutSync",
          1
        );
        this.$store.commit(
          this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
          {
            fieldName:id,
            value: code,
          },
          do_search_book
        );
      });
      
      //   console.log("addFilters:", this.$store.state[this.$store.state.Namedparent.name].books.qs.filters);
    },
    // slider end
  },
  mounted() {
    this.this_state = this.state;
  },
};
</script>

<style scoped>
/deep/.sliderhead .ant-collapse-header{
  color: #fff  !important;
}
/* /deep/.sliderhead .ant-collapse-arrow{
  right: 15px;
  left: 0 !important;
} */
</style>